<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }

        div{
            width: 500px;
            height:500px;
            background-color: aqua;
            margin: 30px;
            overflow: hidden;
        }


        p{
            width: 300px;
            height:300px;
            background-color: orange;
            margin: 30px;
            overflow: hidden;
        }


        span{
            display: block;
            width: 100px;
            height:100px;
            background-color: pink;
            margin: 30px;
        }


        ul{
            width: 300px;
            height:300px;
            padding: 30px;
            border: 30px solid #333;
            background-color: blueviolet;
            background-clip: content-box;
            border-top-width: 50px;
            border-left-width: 100px;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <span>

            </span>
        </p>
    </div>


    <ul>

    </ul>

    <script>
        /* 偏移量  
        


        // offset 
        //  语法: 
        //      元素.offsetLeft
        //      元素.offsetTop
        //  // 该元素和参考父级之间的距离 
        // ? 什么是参考父级(定位父级)
        //  相对于哪个元素 绝对定位?


        // client
        //  语法: 
        //      元素.clientLeft
        //      元素.clienttTop

        // 该元素(内容+内边距)和 border左上角的间距 
        // 简单总结  就是 左边框和 上边框的大小 
        */



        // var span = document.querySelector('span');
        // // console.log('定位父级',span.offsetParent);

        // console.log(span.offsetLeft); // span margin30px + p  margin30px + div margin30px 
        // console.log(span.offsetTop);

        // var ulele = document.querySelector('ul');
        // console.log(ulele.clientLeft); // 100 左边框的大小
        // console.log(ulele.clientTop); // 50 上边框的大小 

    </script>
</body>
</html>